<template>
    <div class="home" id="home" name="home" v-if="showFlag">
        <!-- 轮播图 -->
        <div class="block">
            <el-carousel indicator-position="outside" :interval="4000" height="450px">
                <el-carousel-item>
                    <router-link to="/commodity">
                        <img src="../assets/images/banner/cms_1.jpg" alt="">
                    </router-link>
                </el-carousel-item>
                <el-carousel-item>
                    <router-link to="/commodity">
                        <img src="../assets/images/banner/cms_2.jpg" alt="">
                    </router-link>
                </el-carousel-item>
                <el-carousel-item>
                    <router-link to="/commodity">
                        <img src="../assets/images/banner/cms_3.jpg" alt="">
                    </router-link>
                </el-carousel-item>
                <el-carousel-item>
                    <router-link to="/commodity">
                        <img src="../assets/images/banner/cms_4.jpg" alt="">
                    </router-link>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 轮播图END -->
        <div class="main-box">
            <div class="main">
                <!-- 官方精选区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">官方精选</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <router-link to="/commodity">
                                <img src="http://47.115.85.237:3000/public/imgs/phone/phone.png"/>
                            </router-link>
                        </div>
                        <div class="list">
                            <HomeGoodsList :list="officialSelection" :isMore="true"></HomeGoodsList>
                        </div>
                    </div>
                </div>
                <!-- 官方精选区域END -->


                <!-- 品牌周边区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">品牌周边</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <router-link to="/commodity">
                                <img src="http://47.115.85.237:3000/public/imgs/phone/phone.png"/>
                            </router-link>
                        </div>
                        <div class="list">
                            <HomeGoodsList :list="surroundings" :isMore="true"></HomeGoodsList>
                        </div>
                    </div>
                </div>
                <!-- 品牌周边区域END -->

                <!-- 品牌精选区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">品牌精选</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <router-link to="/commodity">
                                <img src="http://47.115.85.237:3000/public/imgs/phone/phone.png"/>
                            </router-link>
                        </div>
                        <div class="list">
                            <HomeGoodsList :list="brandSelection" :isMore="true"></HomeGoodsList>
                        </div>
                    </div>
                </div>
                <!--品牌精选区域END -->

                <!-- 活动板块区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">活动板块</div>
                    </div>
                    <div class="box-bdShort">
                        <div class="promo-listShort">
                            <router-link to="/commodity">
                                <img src="../assets/images/banner/sliderBar.png"/>
                            </router-link>
                        </div>
                        <div class="list">
                            <HomeGoodsList :list="activitySection" :isMore="false"></HomeGoodsList>
                        </div>
                    </div>
                </div>
                <!-- 活动板块区域END -->

                <!-- 活动板块2区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">活动板块2</div>
                    </div>
                    <div class="box-bdShort">
                        <div class="promo-listShort">
                            <router-link to="/commodity">
                                <img src="../assets/images/banner/sliderBar.png"/>
                            </router-link>
                        </div>
                        <div class="list">
                            <HomeGoodsList :list="activityPlate" :isMore="false"></HomeGoodsList>
                        </div>
                    </div>
                </div>
                <!--活动板块2区域END -->


                <!--                &lt;!&ndash; 热门商品区域 &ndash;&gt;-->
                <!--                <div class="phone">-->
                <!--                    <div class="box-hd">-->
                <!--                        <div class="title">热门商品</div>-->
                <!--                    </div>-->
                <!--                    <div class="box-bdShort">-->
                <!--                        <div class="promo-listShort">-->
                <!--                            &lt;!&ndash;                            <router-link to>&ndash;&gt;-->
                <!--                            &lt;!&ndash;                                <img src="http://47.115.85.237:3000/public/imgs/appliance/appliance-promo2.png"/>&ndash;&gt;-->
                <!--                            &lt;!&ndash;                            </router-link>&ndash;&gt;-->
                <!--                        </div>-->
                <!--                        <div class="list">-->
                <!--                            <HomeGoodsList :list="popularProduct" :isMore="true"></HomeGoodsList>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                &lt;!&ndash; 热门商品区域END &ndash;&gt;-->
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Home',
        data() {
            return {
                carousel: {},//轮播图
                activitySection: {},//活动板块
                popularProduct: {},//热门商品
                officialSelection: {},//官方精选
                surroundings: {},//品牌周边
                brandSelection: {},//品牌精选
                activityPlate: {},//活动板块2
                showFlag: false//加载页面
            }
        },
        methods: {
            getGoodHome() {
                this.$axios
                    .get("/goods/home", {})
                    .then(res => {
                        this.carousel = res.data.result[0].tbPanelContentList;
                        this.activitySection = res.data.result[1].tbPanelContentList;
                        this.popularProduct = res.data.result[2].tbPanelContentList;
                        this.officialSelection = res.data.result[3].tbPanelContentList;
                        this.surroundings = res.data.result[4].tbPanelContentList;
                        this.brandSelection = res.data.result[5].tbPanelContentList;
                        this.activityPlate = res.data.result[6].tbPanelContentList;
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
        },
        created() {
            this.getGoodHome();
            this.showFlag = true;
        },
    }
</script>

<style>
    .main-box {
        background-color: #f5f5f5;
        padding-bottom: 20px;
    }

    .main {
        margin: 0 auto;
        max-width: 1225px;
    }

    /* 轮播图CSS */
    .block {
        margin: 0 auto;
        text-align: center;
        max-width: 1225px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    /* 轮播图CSS END */

    .box-hd {
        height: 58px;
        margin: 20px 0 0 0;
    }

    .box-hd .title {
        float: left;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
    }

    .box-hd .more {
        float: right;
    }

    .box-hd .more a {
        font-size: 16px;
        line-height: 58px;
        color: #424242;
    }

    .box-hd .more a:hover {
        color: #ff6700;
    }

    .box-bd {
        height: 615px;
    }

    .box-bdShort {
        height: 315px;
    }

    .box-bd .promo-list {
        float: left;
        height: 615px;
        width: 234px;
        background-color: #99a9bf;
    }

    .box-bdShort .promo-listShort {
        float: left;
        height: 315px;
        width: 234px;
        background-color: #99a9bf;
    }

    .box-bd .promo-list li {
        z-index: 1;
        width: 234px;
        height: 300px;
        margin-bottom: 14.5px;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .box-bd .promo-list li:hover {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }

    .box-bd .promo-list li img {
        width: 234px;
        height: 300px;
    }

    .box-bd .promo-list img {
        width: 234px;
    }

    .box-bd .list {
        float: left;
        height: 615px;
        width: 991px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 500px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
